<template>
	<view class="content">
		<!-- 第一部分——筛选 -->
		<view class="Topscreen">
			<view class="searchControl">
				入库时间：<el-date-picker class="start" prefix-icon="none" v-model="value1" type="date" placeholder="请选择时间" format="yyyy.MM.dd"></el-date-picker>
				<view class="" style="margin: 0 14rpx;">
					至
				</view>
				<el-date-picker class="start" prefix-icon="none" v-model="value2" type="date" placeholder="请选择时间" format="yyyy.MM.dd"></el-date-picker>
			</view>
			<!-- 搜索框 -->
			<view class="seach">
				<input type="text" value="" placeholder="输入商品名称或订单编号"/>
				<view class="seach_btn">
					<button type="default">重置</button>
					<button class="btn" type="default">搜索</button>
				</view>
			</view>
		</view>
		<!-- 第三场列表 -->
		<view class="Commentlist">
			<!-- 单个 -->
			<view class="list" v-for="item in commentList">
				<!-- 头 -->
				<view class="title">
					<!-- 用户名 -->
					<view class="left">
						<view class="name">
							用户****户
						</view>
						<u-rate disabled="disabled" count="count" v-model="num" active-color="#FFB600" inactive-color="#E6E6E6"></u-rate>
					</view>
					<!-- 时间 -->
					<view class="right">
						2020.03.02 12:34:56
					</view>
				</view>
				<!-- 内容部分 -->
				<view class="Content">
					<!-- 文字内容 -->
					<view class="Content_span">
						确实是纯棉的，看着也很好，摸着很柔软。纯棉材质，按扣开裆连体方便更换纸尿裤，图案可爱宝宝穿它萌萌哒。确实是纯棉的，看着也很好，摸着很柔软确实是纯棉的，看着也很好，摸着很柔软
					</view>
					<!-- 存放图片 -->
					<view class="Content_img">
						<scroll-view scroll-x="true" class="Content_banner">
							<block>
								<view class="img">
									<image src="../../static/image/common/banner.png" mode=""></image>
									<image src="../../static/image/common/banner.png" mode=""></image>
									<image src="../../static/image/common/banner.png" mode=""></image>
									<image src="../../static/image/common/banner.png" mode=""></image>
									<image src="../../static/image/common/banner.png" mode=""></image>
									<image src="../../static/image/common/banner.png" mode=""></image>
									<image src="../../static/image/common/banner.png" mode=""></image>
									<image src="../../static/image/common/banner.png" mode=""></image>
								</view>
							</block>
						</scroll-view>
					</view>
				</view>
				<!-- 订单信息 -->
				<view class="btm_order" @click="toContentdetil">
					<!-- 左图 -->
					<view class="left_img">
						<image src="../../static/image/common/banner.png" mode=""></image>
					</view>
					<!-- 右内容 -->
					<view class="right_span">
						<view class="top_shopmsg">
							新生儿礼盒婴儿衣服用品春夏男女宝纯棉纱睡衣汉和尚服套装满月礼
						</view>
						<view class="order_shop">
							订单编号：S45345234332432434
						</view>
					</view>
				</view>
			</view>
		</view>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value1: '',
				value2: '',
				keyword:'',
				count:5,
				disabled:true,
				num:'4',
				commentList:[
					{},{},{},{}
				]
			};
		},
		methods:{
			toContentdetil:function(){
				// console.log('123')
				uni.navigateTo({
					url:'./Details'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content{
		background-color: #F7F7F7;
	}
	.Topscreen{
		background-color: #FFFFFF;
		padding-bottom: 20rpx;
	}
	.searchControl {
		width: 702rpx;
		margin: 26rpx auto;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		display: flex;
		line-height: 68rpx;
		.el-input {
			width: 264rpx;
			height: 68rpx;
			background: #000000;
			padding: 0rpx 0rpx 0rpx 0rpx !important;
			border-radius: 68rpx;
		}
	}
	.seach{
		width: 710rpx;
		margin:42rpx auto 0;
		display: flex;
		justify-content: space-between;
		input{
			width:446rpx;
			height:68rpx;
			background:rgba(242,245,247,1);
			border-radius:34px;
			font-size:24rpx;
			font-family:PingFang SC;
			font-weight:500;
			color:rgba(178,178,178,1);
			text-indent: 21rpx;
			line-height: 68rpx;
		}
		.seach_btn{
			width: 250rpx;
			display: flex;
			justify-content: space-around;
			button{
				width:112rpx;
				height:68rpx;
				background:rgba(227,242,252,1);
				border-radius:34rpx;
				font-size:28rpx;
				font-family:PingFang SC;
				font-weight:500;
				color:rgba(1,153,254,1);
				border: none !important;
				line-height: 68rpx;
			}
			.btn{
				background:rgba(1,153,254,1);
				color:rgba(255,255,255,1);
			}
		}
	}
	.Commentlist{
		margin-top: 30rpx;
		background-color: #FFFFFF;
		.list{
			width: 690rpx;
			margin: 20rpx auto 60rpx;
			.title{
				display: flex;
				justify-content: space-between;
				padding: 30rpx 0;
				.left{
					display: flex;
					.name{
						font-size:28rpx;
						font-family:PingFang SC;
						font-weight:bold;
						color:rgba(51,51,51,1);
						margin-right: 19rpx;
					}
				}
				.right{
					font-size:20rpx;
					font-family:PingFang SC;
					font-weight:400;
					color:rgba(128,128,128,1);
					line-height: 24rpx;
				}
			}
			.Content{
				.Content_span{
					width:673rpx;
					height:72rpx;
					font-size:26rpx;
					font-family:PingFang SC;
					font-weight:500;
					color:rgba(41,41,41,1);
					line-height:40rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}
				.Content_img{
					margin: 23rpx 0 20rpx;
					width: 690rpx;
					height:226rpx;
					.Content_banner{
						white-space: nowrap;
						width: 100%;
						.img{
							display: inline-block;
							image{
								width:226rpx;
								height:226rpx;
								margin: 0 4rpx;
							}
						}
					}
				}
			}
			.btm_order{
				display: flex;
				width:690rpx;
				height:160rpx;
				background:rgba(247,247,247,1);
				border-radius:8rpx;
				justify-content: space-between;
				.left_img{
					image{
						width:160rpx;
						height:160rpx;
						border-radius:8rpx;
					}
				}
				.right_span{
					width:457rpx;
					height: 160rpx;
					margin-right: 48rpx;
					.top_shopmsg{
						font-size:28rpx;
						font-family:PingFang SC;
						font-weight:bold;
						color:rgba(41,41,41,1);
						height:70rpx;
						line-height:42rpx;
					}
					.order_shop{
						margin-top: 37rpx;
						font-size:22rpx;
						font-family:PingFang SC;
						font-weight:400;
						color:rgba(153,153,153,1);
						line-height:42rpx;
						
					}
				}
			}
		}
	}

</style>